<template>
	<div class="container">
		<div class="jx-container">
      <div class="select-type">
        <div class="item table-item">
          <div class="right">
            <div class="item-inline">
              <span>模板名称</span>
              <el-input class="tel-value" v-model="params_list.name" placeholder="请输入模板名称"></el-input>
            </div>
            <div class="item-inline">
              <el-button class="jx-btn" type="primary" @click="search">搜索</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="jx-table">
        <div class="title">
          <img class="icon" src="/static/img/icon-platform.png"/>
          产品模板列表
          <div class="add-new">
            <el-button class="jx-btn" type="primary" @click="addRow">添加产品模板</el-button>
          </div>
        </div>
        <el-table :data="list" border style="width: 100%" v-loading="boo.loading">
          <el-table-column type="index" label="序列" width="55" align="center">
            <template slot-scope="scope">
              <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="institutionTemplateName" label="模板名称" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="address" label="适用车系" align="center" :show-overflow-tooltip="true">
          </el-table-column>
          <el-table-column prop="shop" label="支持门店" align="center" >
          </el-table-column>
          <el-table-column prop="institutionTemplateStatus" label="状态" align="center" >
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="scope">
              <el-button @click="addPlan(scope.row)" type="text" size="small">去下单</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div v-if="list.length != 0" class="jx-pagination">
          <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
            :total="other.allRow">
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 选择模板 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="75%">
      <div slot="title" class="header-title">
        <span class="title-name">添加产品模板</span>
      </div>
      <el-form ref="form" :model="currentRow" :rules="rules" label-width="100px" class="jx-form">
      <div class="jx-detail" style="padding: 0;">
        <div class="detail-item" style="margin-bottom: 30px;">
          <div class="item">
            <div class="title">基本信息</div>
            <el-form-item label="模板名称：" prop="institutionTemplateName">
              <el-input v-model="currentRow.institutionTemplateName" placeholder="请输入模板名称"></el-input>
            </el-form-item>
            <el-form-item label="适用地区：" prop="institutionTemplateProvinceCity">
              <el-radio-group v-model="currentRow.institutionTemplateProvinceCity" @change="getActive">
                <el-radio :label="不限地区">不限地区</el-radio>
                <el-radio :label="2">手动添加地区</el-radio>
              </el-radio-group>
              <div class="table-item" v-if="boo.isAddress" style="margin: 10px auto;">
                <div class="right" style="padding: 0;">
                  <div class="item-inline">
                    <span>搜索地区：</span>
                    <el-autocomplete
                      class="inline-input"
                      v-model="params_product.address"
                      :fetch-suggestions="querySearch"
                      placeholder="请输入地区"
                      :trigger-on-focus="false"
                      @select="handleSelect"
                    ></el-autocomplete>
                    <el-button class="jx-btn" type="primary" @click="add_product">添加</el-button>
                  </div>
                </div>
              </div>
              <div class="quick-tag" v-if="boo.isAddress">
                <span class="bg">限制地区</span>
                <el-tag
                  closable
                  type=''>
                  安徽省
                </el-tag>
              </div>
            </el-form-item>
            <el-form-item label="适用车系：" prop="institutionTemplateCarType">
              <el-select class="tel-value" v-model="currentRow.institutionTemplateCarType" placeholder="请选择">
                <el-option label="全系" value="全系"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="detail-item">
          <div class="item">
            <div class="title">产品信息</div>
            <div class="select-type">
              <div class="item table-item" style="margin: 0;">
                <div class="right" style="padding: 0;">
                  <div class="item-inline">
                    <span>搜索商品：</span>
                    <el-input class="tel-value" v-model="params_product.name" placeholder="请输入商品名称"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-button class="jx-btn" type="primary" @click="search_product">搜索</el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="jx-table">
              <el-table :data="shoplist" border style="width: 100%" tooltip-effect="dark" ref="multipleTable" @selection-change="handleSelectionChange" v-loading="boo.loading">
                <el-table-column
                  type="selection"
                  align="center"
                  width="55">
                </el-table-column>
                <!-- <el-table-column type="index" label="序列" width="55" align="center">
                  <template slot-scope="scope">
                    <span>{{(scope.$index + 1) + ((params_list.page - 1) * params_list.size)}}</span>
                  </template>
                </el-table-column> -->
                <el-table-column prop="img" label="产品图片" width="130" align="center">
                  <template slot-scope="scope">
                    <img class="logo" :src="scope.row.img"/>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="产品名称" width="180" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="con" label="产品配置清单" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="type" label="商品类型" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="price" label="采购价格" align="center" :show-overflow-tooltip="true">
                </el-table-column>
                <el-table-column prop="shop" label="数量" align="center" :show-overflow-tooltip="true">
                </el-table-column>
              </el-table>
              <!-- <div v-if="shoplist.length != 0" class="jx-pagination">
                <el-pagination @current-change="pageChange" @size-change="handleSizeChange" :current-page="params_list.page" :page-sizes="[10,50,100]" :page-size="params_list.size" layout="total, sizes, prev, pager, next, jumper"
                  :total="other.allRow">
                </el-pagination>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">保存套餐模板</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
  import shoplist from 'static/json/product/shoplist.json'
  const cityOptions = [
    {value: '合肥',val: '1'},{value: '芜湖',val: '2'},{value: '安庆',val: '3'},
  ]
	export default {
		data() {
			return {
        https: {
          list: this.$api.product.template,
          common: this.$api.common.dict,
          other: this.$api.product.list
        },
        boo: {
          loading: false,
          showDialog: false,
          saveing: false,
          isAddress: false,
        },
        other: {
          allRow: 1,
        },
        list: '',
        params_list: {
          page: 1,
          size: 10,
          name: '',
        },
        currentRow: {},
        rules: {
          institutionTemplateName: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
          institutionTemplateCarType: [{ required: true, message: '请选择车系', trigger: 'change' }],
          institutionTemplateProvinceCity: [{ required: true, message: '请选择地区', trigger: 'change' }],
        },
        params_product: {
          name: '',
          address:'',
        },
        shoplist: shoplist,
        city: cityOptions,
			}
		},
		mounted(){
      let _self = this
      _self.getList()
      // _self.getAddress()
    },
		methods: {
      // getAddress(){
      //   let _self = this
      //   let params = {
      //     institutionTemplateProvinceCity: _self.params_list.name,
      //   }
      //   _self.boo.loading = true
      //   let success = (res)=>{
      //     res = res.data
      //     if(res.retCode == 1){
      //       _self.city = res.retObject.list
      //     }else{
      //       _self.$message.error(res.retMsg)
      //     }
      //     _self.boo.loading = false
      //   }
      //   _self.$axios.get(_self.https.list.area, params, success) 
      // },
      getList(){
        let _self = this
        let params = {
          pageNumber: _self.params_list.page,
          pageSize: _self.params_list.size,
          institutionTemplateName: _self.params_list.name,
          orderBy: '',
        }
        _self.boo.loading = true
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.list = res.retObject.list
            _self.other.allRow = Number(res.retObject.totalRow)
          }else{
            _self.$message.error(res.retMsg)
          }
          _self.boo.loading = false
        }
        _self.$axios.get(_self.https.list.list, params, success) 
      },
      pageChange(val){
        let _self = this
        _self.params_list.page = val
        _self.getList()
      },
      handleSizeChange(val) {
        let _self = this
        _self.params_list.size = val
        _self.getList()
      },
      search(){
        let _self = this
        _self.getList()
      },
      handleSelectionChange(val){
        console.log(val)
      },
      addRow(){
        let _self = this
        _self.boo.showDialog = true
        _self.currentRow = {}
      },
      addPlan(item){
        let _self = this
        let params = {
          path: '/order/quick_order?id=',
          query: item.institutionTemplateId
        }
        _self.$router.push(params.path + params.query)
      },
      getActive(){
        let _self = this
        if(_self.currentRow.institutionTemplateProvinceCity == 2){
          _self.boo.isAddress = true
        }else {
          _self.boo.isAddress = false
        }
      },
      querySearch(queryString, cb) {
        var restaurants = this.city;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        console.log(results)
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      handleSelect(item) {
        console.log(item);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      search_product(){

      },
      hiddenRow(){},
      submitRow(){

      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-dialog
    .jx-table
      /deep/ .el-table__body td
        .cell
          height: auto
          line-height: auto
    .item
      .table-item .inline-input
        width: 250px
        margin-right: 10px
        /deep/ .el-input--small
          width: 100%
    .quick-tag
      .bg
        background: url('/static/img/u603.png') no-repeat
        background-size: cover
        padding: 10px
        padding-right: 35px
        margin-right: 10px
      .el-tag--small
        height: 32px
        line-height: 32px
        padding: 0 10px
      /deep/ .el-icon-close:before
        content: "\e6db" !important
</style>
